<template>
    <div class="HomeWork_div">
        <div class="components_title">
            <TitleTop>

            </TitleTop>

            <TitleMenu>
                <div slot="titleMenu_text" class="Homework_titleMenu_text">
                    <span>主页</span>
                </div>
                <div slot="titleMenu_add">
                    <a-icon type="sync" style="font-size: 7vw;" @click="refresh" theme="outlined" :class="[rotate?'fa fa-arrow-down go':'fa fa-arrow-down aa']"  />
                </div>
            </TitleMenu>
        </div>
        <div class="homework_content">
            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/01/normal.png" @click="$router.push('/floodPatrol')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            防洪巡查
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico" >
                            <img src="./../assets/drawable-mdpi/function/02/normal.png" @click="$router.push('/lineWork')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            线路作业
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/03/normal.png" @click="$router.push('/warnInfo')" clickMusic='true'>
                            <div class="warn_ico" v-if="this.$store.state.countWarningNumber!==''">{{this.$store.state.countWarningNumber}}</div>
                        </div>
                        <div class="homework_content_text">
                            报警消息
                        </div>
                    </div>
                </a-col>
            </a-row>

            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/04/normal.png" @click="$router.push('/stateSet')" clickMusic='true'/>
                        </div>
                        <div class="homework_content_text">
                            状态设置
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/05/normal.png" @click="$router.push('/floodPatrol/infoReport')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            资料上报
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/06/normal.png" @click="$router.push('/reportHistory')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            上报历史
                        </div>
                    </div>
                </a-col>
            </a-row>

            <a-row type="flex" justify="space-around" style="width: 100vw;height: calc((100vh - 66vw)/3);">
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico" >
                            <img src="./../assets/drawable-mdpi/function/07/normal.png" @click="$router.push('/systemSet')" clickMusic='true'>
                        </div>
                        <div class="homework_content_text">
                            系统设置
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico" @click="test">
                            <img src="./../assets/drawable-mdpi/function/08/normal.png" clickMusic='true'>
                        </div>
                        <div class="homework_content_text" >
                            调度中心
                        </div>
                    </div>
                </a-col>
                <a-col :span="8">
                    <div style="padding: 2vw">
                        <div class="homework_content_ico">
                            <img src="./../assets/drawable-mdpi/function/09/normal.png" @click="loginOut()" clickMusic="true">
                        </div>
                        <div class="homework_content_text" >
                            退出系统
                        </div>
                    </div>
                </a-col>
            </a-row>
        </div>
        <FooterChaanel></FooterChaanel>
    </div>
</template>
<style>
    .homework_content{
        width: 100vw;
        height: calc(100vh - 66vw);
        background: rgb(237,237,237);
        padding-left: 2vw;
    }
    .aa{
        transition: all 1s;
    }
    .go{
        transform:rotate(180deg);
        transition: all 1s;
    }

    .HomeWork_div{
        width: 100vw;
        margin: 0;
        padding: 0;
    }

    .Homework_titleMenu_text{
        text-align: center;
        font-size: 5.5vw;
        generic-family: PingFangSC-Medium;
    }

    .homework_ul{
        width: 100vw;
        list-style: none;
        overflow: hidden;
        padding:5vw 0 5vw 2.25vw;
        background: rgb(237,237,237);
        margin: 0;
        height: calc(100vh - 66vw);
    }
    .homework_li{
        float: left;
        width: 23.5vw;
        height: 32vw;
        margin: 0 4vw 1vw 4vw;
        background: rgb(237,237,237);

    }
    .homework_content_ico{
        width: 23.5vw;
        height: 23.5vw;
        position: relative;
    }
    .warn_ico{
        width:8vw;
        height: 8vw;
        line-height: 8vw;
        background: #FF3850 100% ;
        -moz-border-radius: 4vw;
        -webkit-border-radius: 4vw;
        border-radius:4vw;
        color: white;
        text-align: center;
        font-weight: normal;
        font-size: 5vw;
        position:absolute;
        right: -3vw;
        top: -2vw;
    }
    .homework_content_text{
        width: 23.5vw;
        height: 7.5vw;/*适配G01A改了，原来为8.5vw/7.5*/
        font-size: 4.5vw;/*适配G01A改了，原来为5vw 改为4.5*/
        line-height: 7.5vw;
        color: rgb(105, 105, 105);
        generic-family: SimHei;
    }
    /*增加图片清晰度*/
    #homework_ul li div{
        background-size:contain;
    }
    #homework_ul li div img{
        background-size:contain;
    }
    .homework_ul li div img:active{
        /*点击按钮放大效果*/
        transform: scale(1.1);
    }
</style>
<script>
    import TitleTop from './../components/TitleTop'
    import TitleMenu from  './../components/TitleMenu'
    import FooterChaanel from  './../components/FooterChaanel'
    import ARow from "ant-design-vue/es/grid/Row";
    import ACol from "ant-design-vue/es/grid/Col";
    import { mapMutations } from 'vuex';
    export default {
        name: "HomeWork",
        components:{ACol, ARow, TitleTop,TitleMenu,FooterChaanel},
        data() {
            return {
                msg:'',
                rotate:false,
                Longitude:"",
                Latitude:"",
                Speed:"",
                Altitude:"",
                WorkModeId:localStorage.getItem("workModeId"),
                UserId:localStorage.getItem("sid"),
            }
        },
        mounted(){

        },
        created(){
           document.addEventListener("backbutton", this.eventBackButton, false);
        },
        computed: {
            userToken() {
                return this.$store.state.Authorization;
            },
            gis4_phone () {
                return this.$store.state.gis4_phone;
            },
        },
        methods:{
            ...mapMutations(['changeLogin',"updateUsername","changeWorkModeId"]),
            test(){

            },
            eventBackButton(){
                //监听返回键按钮事件，返回键点击响应(核心代码)
                console.log("created enter eventBackButton");
                navigator.Backbutton.goHome(function() {
                    console.log('go home success!');
                    }, function() {
                    console.log('go home fail!');
                    });
            },
            loginOut(){
                let me = this;

                let title = "退出选择";
                let message = "是否确认退出程序？";
                let buttonLabels = ["确认","取消"];//出现界面：2取消 1确认
                if(typeof(cordova)!=='undefined') {
                    //手机端
                    console.log("手机端");
                    navigator.notification.confirm(message, confirmCallback, title, buttonLabels);
                }else{
                    //web端
                    me.$store.commit("updateUsername","");
                    me.$store.commit("updateSid","");
                    me.$store.commit("updateToken","");
                }
                function confirmCallback(buttonIndex) {
                    if(buttonIndex===1){
                        console.log("You clicked right button" + buttonIndex);

                        //退出前获取并提交一次定位数据
                        /*me.$getBaiduLocation().then(result => {
                            console.log("ready loginOut getLocation result",result);
                            if(result.longitude!==null||typeof (result.longitude)==="undefined"){
                                me.Latitude = result.latitude;
                                me.Longitude = result.longitude;
                                me.Speed = result.speed;
                                me.Altitude = result.altitude;
                                //退出前提交一次定位数据
                                me.$api.sendFailInfo(Time,me.Longitude,me.Latitude,me.Speed,me.Altitude,me.WorkModeId,me.UserId).then(resp => {
                                    if(resp.status<300){
                                        console.log("退出前的定位数据发送成功!");
                                    }
                                }).catch(err=> {
                                    console.log(err);
                                });
                            }else{
                                me.Longitude = me.$store.state.longitude;
                                me.Latitude = me.$store.state.latitude;
                                me.Speed = "0";
                                me.Altitude = "0";
                            }
                        }).catch(error => {
                            console.log("loginOut getCooUsingBaiduSdk error:",error);
                        });*/

                        //退出对讲服务器
                        /*try{
                            let success = function(result){
                                console.log("对讲离线成功",result);
                            };
                            let fail = function(e){
                                console.log("对讲离线失败",e);
                            };
                            Intercom.offLine(success,fail);
                        }catch (e) {
                            console.log(e);
                        }*/

                        me.$api.logout().then(response =>{
                            if(response.status === 204){
                                me.$store.commit("updateUsername","");
                                me.$store.commit("updateSid","");
                                me.$store.commit("updateToken","");
                                console.log("退出消息送达且反馈");
                                /*me.$router.push('/');//返回登陆页*/
                                /*me.loginOutToast();//退出提示吐司*/
                            }
                        }).catch(error =>{
                            console.log("退出异常:",error);
                            me.loginOutFail();
                        });
                        navigator.app.exitApp();//退出软件
                        /*setTimeout(()=>{

                        },100);*/

                    }else {
                        console.log("You clicked left button" + buttonIndex);
                        return;
                    }
                }

            },
            loginOutToast(){
                let me =this;
                window.plugins.toast.showWithOptions(
                    {
                        message: "即将退出",
                        duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                        position: "bottom",
                        addPixelsY: -60  // added a negative value to move it up a bit (default 0)
                    },
                    function(){navigator.app.exitApp();console.log('toast success: ')},
                    function(){console.log('toast error: ')}
                );

            },
            loginOutFail() {
                let self = this;
                    window.plugins.toast.showWithOptions(
                        {
                            message: "身份失效，请重新登录",
                            duration: "short", // which is 2000 ms. "long" is 4000. Or specify the nr of ms yourself.
                            position: "bottom",
                            addPixelsY: -40  // added a negative value to move it up a bit (default 0)
                        },
                        function () {
                            console.log('toast success: ');
                            self.$router.push('/');
                        },
                        function () {
                            console.log('toast error: ')
                        }
                    );
            },
            refresh(){
                this.clickButton();
                this.rotate=!this.rotate;
            },
            formatDate(value){
                let year = value.getFullYear();
                let month = value.getMonth() + 1;
                let date = value.getDate();
                let hour = value.getHours();
                let minute = value.getMinutes();
                let second = value.getSeconds();
                return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
            },
            removeListenerss(){
                console.log("移除backbutton");
            },
        },
        beforeDestroy(){
            let me = this;
            console.log("beforeDestroy:");
            document.removeEventListener('backbutton',me.eventBackButton,false);
        },
    }
</script>

